<template>
	<el-dialog v-dialogDrag class="abow-dialog" :visible.sync="visible"
		title="" :close-on-click-modal="false"
		:close-on-press-escape="false" width="800px" @close="closeFn">
		<div slot="title" class="dialog-title">
			<el-row>
				<span class="dialog-title-text text-green font-weight" style="font-size: 17px;">{{(name?name+' ':'')}}</span>
				<span class="dialog-title-text">{{(name?'的':'')+'监测链接'}}</span>
			</el-row>
		</div>
		<el-form class="form" :model="dataForm" :rules="dataRule" ref="dataForm" label-width="120px" size="medium" :inline="false"
			labelSuffix="：">
			<el-form-item prop="name" label="回传监测平台">
				<el-select clearable filterable v-model="dataForm.spread_platform_id" :disabled="true" placeholder="请选择" @focus="getPlatformFn">
					<el-option v-for="(item,index) in platformId" :key="index" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="backhaul_setting_id" label="回传监测模板">
				<el-select clearable filterable v-model="dataForm.backhaul_setting_id" placeholder="请选择" @focus="getBackhaulSettingFn">
					<el-option v-for="(item,index) in backhaulSetting" :key="index" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="applet_id" label="回传监测链接">
				<el-card class="box-card">
					<div class="cont-box">
						<div class="row-box">
							<div class="row_title">
								<h4 class="d-flex flex-shrink">1.0</h4>
								<div class="d-flex flex-1 flex-row a-center j-sb">
									<el-link v-if="dataForm.url_toutiao10" class="mr-20 row_cont" type="primary" :underline="false">{{dataForm.url_toutiao10}}</el-link>
									<div v-else class="d-flex" style="color: #909399;font-size: 15px;">空</div>
									<el-button :disabled="dataForm.url_toutiao10?false:true" type="primary" plain size="small" icon="el-icon-copy-document" style="height: 36px;"
										@click="copyText(dataForm.url_toutiao10)">复制</el-button>
								</div>
							</div>
						</div>
						<div class="row-box">
							<div class="row_title">
								<h4 class="d-flex flex-shrink">2.0</h4>
								<div class="d-flex flex-1 flex-row a-center j-sb">
									<el-link v-if="dataForm.url_toutiao20" class="mr-20 row_cont" type="primary" :underline="false">{{dataForm.url_toutiao20}}</el-link>
									<div v-else class="d-flex" style="color: #909399;font-size: 15px;">空</div>
									<el-button :disabled="dataForm.url_toutiao20?false:true" type="primary" plain size="small" icon="el-icon-copy-document" style="height: 36px;"
										@click="copyText(dataForm.url_toutiao20)">复制</el-button>
								</div>
							</div>
						</div>
					</div>
				</el-card>
			</el-form-item>
		</el-form>
		<template slot="footer">
			<el-button @click="visible = false">{{ $t('views.public.cancel') }}</el-button>
			<el-button type="primary" @click="dataFormSubmitHandle()">保存</el-button>
		</template>
	</el-dialog>
</template>

<script>
	let that;
	import * as clipboard from 'clipboard-polyfill'
	import {
		debounce
	} from 'lodash'
	import {
		isEmail,
		isMobile
	} from '@/libs/validate'
	import schema from 'async-validator'
	export default {
		data() {
			return {
				name:'',
				dataId:null,
				platformId:[],
				backhaulSetting:[],
				visible: false,
				deptList: [],
				deptListVisible: false,
				fullscreenLoading: false,
				roleList: [],
				roleIdListDefault: [],
				dataForm: {
					spread_platform_id:'',//回传监测平台
					backhaul_setting_id:'',//回传监测模板
					url_toutiao10:'',//1.0链接
					url_toutiao20:'',//2.0链接
				}
			}
		},
		created() {
			that = this;
		},
		computed: {
			dataRule() {
				return {
				}
			}
		},
		watch:{
		},
		methods: {
			copyText(text) {
				console.log(text);
				if(!text) {
					return that.$message({message: '数据为空，无法复制！',type: 'error',duration: 1500})
				}
				clipboard.writeText(text).then(
					function() {
						that.$message({
							message: '复制成功！',
							type: 'success',
							duration: 1500
						})
					},
					function() {
						that.$message({
							message: '复制失败！',
							type: 'error',
							duration: 1500
						})
					}
				);
			},
			closeFn(){
				this.$refs.dataForm.resetFields();
				this.dataForm.recharge_template_type = 1;
				this.dataForm.recharge_template_id = '';
			},
			//投放平台列表
			async getPlatformFn(){
				const platformIdRes = await this.$axios.get('/api/common/platform');
				console.log(platformIdRes);
				if(Array.isArray(platformIdRes)){
					if(platformIdRes.length){
						this.platformId = platformIdRes;
						return;
					}
				}
				this.platformId = [];
			},
			//回传监测模板列表
			async getBackhaulSettingFn(){
				console.log('回传监测模板列表回传监测模板列表');
				const backhaulSettingRes = await this.$axios.get(`/api/delivery/dataSpread/deliverySettings/${this.dataForm.id}`);
				console.log(backhaulSettingRes);
				if(Array.isArray(backhaulSettingRes)){
					if(backhaulSettingRes.length){
						this.backhaulSetting = backhaulSettingRes;
						return;
					}
				}
				this.backhaulSetting = [];
			},
			init() {
				this.visible = true;
				this.$nextTick(() => {
					setTimeout(()=>{
						this.$refs.dataForm.resetFields();
					},200)
				})
			},
			update(row) {
				this.getPlatformFn();
				this.visible = true;
				this.$nextTick(() => {
					this.$refs.dataForm.resetFields();
					this.dataForm = Object.assign({}, row)
					this.getBackhaulSettingFn();
					console.log(this.dataForm);
				})
			},
			// 表单提交
			dataFormSubmitHandle: debounce(function() {
				console.log('表单提交');
				this.$refs.dataForm.validate((valid) => {
					console.log(valid + '--+++++-----------')
					if (!valid) {
						return false
					}
					console.log(this.dataForm);
					this.$axios.post(`/api/delivery/dataSpread/monitoringLink/${this.dataId}`, this.dataForm).then(res => {
						this.$message({
							message: this.$t('views.public.success'),
							type: 'success',
							duration: 500,
							onClose: () => {
								this.visible = false;
								this.$emit('refreshDataList');
							}
						})
					}).catch(() => {})
				})
			}, 1000, {
				leading: true,
				trailing: false
			})
		}
	}
</script>

<style lang="scss" scoped>
	.form{
		width: 720px;
	}
	.box-card{
		.cont-box {
		    min-height: 200px;
		    height: 300px;
		    overflow-y: auto;
			.row-box {
			    justify-content: space-between;
			    align-items: center;
			    margin-bottom: 15px;
				.row_title {
				    display: flex;
					h4 {
					    width: 30px;
					    margin: 0;
					    padding: 0;
					}
					.row_cont {
					    width: 90%;
						margin-right: 20px;
					    font-size: 16px;
					    line-height: 25px;
					    overflow: hidden;
					    text-overflow: ellipsis;
					    display: -webkit-box;
					    -webkit-box-orient: vertical;
					    -webkit-line-clamp: 3;
					}
				}
			}
		}
		
	}
	
</style>